<template>
	<el-dialog :showAdd width="40%" align="left" :close-on-click-modal="false" @close="handleClose(ruleFormRef)">
		<TitleBox :title="title"></TitleBox>
		<el-form class="layout-form" :model="addData" :rules="rules" ref="ruleFormRef">
			<el-form-item label="姓名" label-width="100px" prop="userName">
				<el-input placeholder="请输入姓名" v-model="addData.userName"></el-input>
			</el-form-item>
			<el-form-item label="性别" label-width="100px" prop="gender">
				<el-radio-group v-model="addData.gender" class="ml-4">
					<el-radio value="1">男</el-radio>
					<el-radio value="2">女</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="手机号" label-width="100px" prop="phone">
				<el-input placeholder="请输入手机号" v-model="addData.phone"></el-input>
			</el-form-item>
			<el-form-item label="密码" label-width="100px" prop="password">
				<el-input placeholder="请输入密码" v-model="addData.password"></el-input>
			</el-form-item>
			<el-form-item label="角色" label-width="100px" prop="roleId">
				<el-radio-group class="ml-4" v-model="addData.roleId">
					<el-radio value="1" :disabled="roleDisabled" @click="selectSysRole">系统管理员</el-radio>
					<el-radio value="2" @click="selectHosRole">医院管理员</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="医院" label-width="100px" prop="hospitalName" v-if="showHospital">
				<el-select placement="bottom" v-model="addData.hospitalName" placeholder="请选择医院" size="large"
					@change="changeHospital">
					<el-option v-for="item in hospitialList" :key="item.id" :label="item.hospitalName"
						:value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item class="layout-footer">
				<el-button style="background-color: #ccc;color: white;" @click="cancle">取消</el-button>
				<el-button type="primary" @click="confirm(ruleFormRef)">确定</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script setup lang='ts'>
import { reqAccountHosInfo, reqAddAccount } from '@/api/account';
import { ElMessage } from 'element-plus';
import { onMounted, ref, reactive } from 'vue';
import TitleBox from '@/components/titleBox/index.vue';
const title = ref('新增账号');
import { useStore } from 'vuex';
const store = useStore();
// 定义角色禁用
const roleDisabled = ref(false);
const showHospital = ref(true);

defineProps(['showAdd']);
const emit = defineEmits(['cancle', 'confirm']);
// 验证
const ruleFormRef = ref();
const rules = reactive({
	userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
	gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/, message: '密码必须由8-16位字母和数字组合', trigger: 'blur' }

	],
	roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
	hospitalName: [{ required: true, message: '请选择医院', trigger: 'change' }]
})
// 新增账号的医院列表
const hospitialList = ref<any>([]);
// 请求医院列表
const getHospitalList = async () => {
	const result = await reqAccountHosInfo();
	// console.log('医院下拉列表', result);
	if (result.data.code === 0) {
		hospitialList.value = result.data.result;
	}
}
// 更换医院
const changeHospital = (id: any) => {
	addData.hospitalId = id;
}
// 角色禁用
const changeRoleId = () => {
	// console.log('AAA',store.state.roleId);
	if (store.state.roleId === 2) {
		roleDisabled.value = true;
	}
}
// 系统管理员关闭医院列表
const selectSysRole = () => {
	showHospital.value = false;
}
const selectHosRole = () => {
	showHospital.value = true;
}
onMounted(() => {
	getHospitalList();
	changeRoleId();
})
// 新增账号列表
const addData: any = reactive({
	"userName": "",
	"gender": "",
	"phone": "",
	"password": "",
	"roleId": "",
	"roleName": "",
	"hospitalId": "",
	"hospitalName": "",
})
// 关闭对话框,清空内容
const handleClose = (formEl: any) => {
	addData.hospitalName = '';
	showHospital.value = true;
	if (!formEl) return;
	formEl.resetFields();
}
// 确定
const confirm = async (formEl: any) => {
	if (!formEl) return
	await formEl.validate(async (isOK: any) => {
		if (isOK) {
			try {
				const res = await reqAddAccount(addData);
				// console.log("添加账号", res);
				if (res.data.code === 0) {
					emit('confirm');
					ElMessage({
						type: 'success',
						message: '添加账号成功'
					})
				}
				if (res.data.code !==0) {
					// emit('confirm');
					ElMessage({
						type: 'error',
						message: '不能使用重复的手机号'
					})
				}
			} catch (error) {
				console.log(error);
			}
		} else {
			console.log('输入框不能为空！');
		}
	})
}
// 取消
const cancle = () => {
	emit('cancle');
}
</script>

<style scoped lang='scss'>
.layout-form {
	margin-top: 30px;

	// 密码报错提示
	:deep(.el-form-item__error) {
		left: 10px;
	}

	.el-input {
		width: 90%;
		margin-left: 10px;
	}

	.el-radio-group {
		margin-left: 10px;
	}

	.el-select {
		margin-left: 10px;
		width: 90%;
	}

	.layout-footer {
		margin-top: 30px;
		margin-left: 70%;
	}
}
</style>